import { useEffect, useState, useImperativeHandle, forwardRef } from 'react';
import { connect } from 'umi';
import styles from './index.less';
import { Modal, Table } from 'antd';
import { unitDetialModal } from '@/assets';
import { tableLocale } from '@/tool/components/PageEmpty';
const { Column, ColumnGroup } = Table;

function UnitDetailModal({ unitLimitInfo, selectedUnitIds }, ref) {
  useImperativeHandle(ref, () => ({
    initHandle,
  }));

  const [showModal, setShowModal] = useState(false),
    [selectedUnitLimitInfo, setSelectedLimitInfo] = useState({});

  const initHandle = () => {
    setShowModal(true);
    // 过滤数据，只展示选中的场站限额
    let data = JSON.parse(JSON.stringify(unitLimitInfo));
    data.columnData = data.columnData.filter((item) => {
      return selectedUnitIds.indexOf(item.unitId) !== -1;
    });
    setSelectedLimitInfo(data);
  };

  // 交易序列改变 => 通过接口获取所有单元限额信息

  // 选中的交易单元改变 => 过滤选中的交易单元限额信息

  return (
    <Modal
      className={styles.unitDetailModal}
      centered={true}
      title={
        <div className={styles.modalTitle}>
          <img src={unitDetialModal} />
          <span className={styles.text}>分单元限额</span>
          <div className={styles.unit}>
            <span className={styles.label}>单位：</span>MWh
          </div>
        </div>
      }
      visible={showModal}
      footer={null}
      onCancel={() => {
        setShowModal(false);
      }}
    >
      <Table
        className={styles.table}
        dataSource={selectedUnitLimitInfo.dataSource}
        rowKey="hourOrder"
        bordered={true}
        pagination={false}
        locale={tableLocale}
        scroll={{ x: true }}
      >
        <Column
          title="时点"
          align="center"
          dataIndex="hourOrder"
          key="hourOrder"
          width={76}
          fixed="left"
        />
        {selectedUnitLimitInfo?.columnData?.map((item) => (
          <ColumnGroup title={item.unitTitle} key={item.unitId}>
            <Column
              title="买入"
              className={styles.stationsColumn}
              dataIndex={item.unitId + '_unitBuyLimit'}
              key={item.unitId + '_unitBuyLimit'}
              align="center"
            />
            <Column
              title="卖出"
              className={styles.stationsColumn}
              dataIndex={item.unitId + '_unitSellLimit'}
              key={item.unitId + '_unitSellLimit'}
              align="center"
            />
          </ColumnGroup>
        ))}
      </Table>
    </Modal>
  );
}

export default connect(
  ({ tenDaysCentralizedBidding }) => ({
    unitLimitInfo: tenDaysCentralizedBidding.unitLimitInfo,
    selectedUnitIds: tenDaysCentralizedBidding.selectedUnitIds,
  }),
  null,
  null,
  { forwardRef: true },
)(forwardRef(UnitDetailModal));
